<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>绘制线</title>
    <script src="./glMatrix-0.9.6.js"></script>
    <script>

        var projMat4 = mat4.create(); // 第三方库：投影影矩阵转换功能
        var webgl;

        // 顶点着色器的配置
        let vertexstring = `
        attribute vec4 a_position;
        uniform     mat4    proj;
        void main(void){
            gl_Position =proj *  a_position;
            gl_PointSize=60.0;
        }
        `;

        // 片元着色器的配置
        let fragmentstring = `
        void main(void){
          gl_FragColor = vec4(0,0,1.0,1.0);
        }
        `;


        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }

        // canvas中初始化webgl上下文
        function initWebgl() {
            let webglDiv = document.getElementById("myCanvas");
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            mat4.ortho(
                0,
                webglDiv.clientWidth,
                webglDiv.clientHeight,
                0,
                -1.0,
                1.0,
                projMat4
            );
        }

        // 配置顶点vertex_shader、片元着色器fragment_shader，建立渲染项目program
        function initShader() {
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);

            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader);

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program;
        }

        function initBuffer() {
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let arr = [100.0, 100.0, 0, 200.0, 200.0, 0, 300.0, 200.0, 0, 400, 600, 0];
            let vertexArr = new Float32Array(arr);
            let trangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, trangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, vertexArr, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);

            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
            webgl.uniformMatrix4fv(uniformProj, false, projMat4);
        }
        function draw() {
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.drawArrays(webgl.LINES, 0, 4);        // 绘制线
            // webgl.drawArrays(webgl.LINE_STRIP,0,4)  // 绘制折现
            // webgl.drawArrays(webgl.LINE_LOOP,0,4)   // 绘制闭合线 
        }



    </script>
</head>

<body onload="init()">
    <canvas id="myCanvas" width="1024" height="768"></canvas>
</body>

</html>